The Basics

Terms to Know

• Dashboard – a snapshot of information, typically a high-level overview that can be narrowed-down, or “drilled down” to review specific selections of data.

  • Static Dashboard – dashboards that provided a fixed view of data, without frequent updates and frequently without the ability to drill-down.

  • Dynamic Dashboard – dashboards that are updated frequently, and often allow users to drill-down and interact with the data.

• Report – a comprehensive document, typically in extreme detail that has subsections for each topic of interest.

Quarto can generate all these formats (and many more), but we will focus on dashboards specifically.

The Basics

Languages

Dashboards written with Quarto 1.4+ can utilize:

• Python (via Jupyter notebooks - .ipynb)

• R (via plain text markdown - .qmd) - used for the purposes of this tutorial..

• Julia

• Observable (“Quarto - Quarto Dashboards” n.d.).

Quarto dashboards can include various mixes of these languages as required by the user/company. Therefore, you could create a dashboard that includes both ggplot2 and matplotlib visualizations.

The Basics

Quarto Dashboard Components

1. Navigation Bar – serves to provide navigation between pages of the dashboard (if more than one exists).

2. Pages – dashboards have traditionally been defined as a single page. However, with more complex datasets, it may be useful to divide the data into pages of a dashboard, each telling its own story.

3. Cards (set with rows/columns) – cards are the fundamental unit of quarto dashboards and are the containers of all data elements (tables, figures, markdown). The content of cards maps to the cells of a notebook or markdown document. Cells that do not produce output are not considered cards. This advancement leads to easier location specification compared to the referenced paper.

4. Rows/Columns (defined by markdown headings) – rows and columns are used to define where each data element (tables, figures markdown) is positioned on the dashboard.

5. Tabsets – these are groups of rows or columns on a dashboard that can be used to further divide content.

6. Sidebars and Toolbars – sidebars are collapsible vertical panels for inputs while toolbars are horizontal panels for inputs. This is where filters, tick boxes, and other drill-down tools can be placed.

The syntax associated with markdown is also outside the scope of this paper, but there are many free and publicly available resources to help with writing markdown syntax (Quarto – Markdown Basics).

The First Dashboard

Goals

• Visualize how many clinical trials are successfully completed each year in the state of Florida.

• Visualize the phase distribution of these clinical trials, which may help determine how many patients are receiving care via clinical research (larger numbers of participants are required for higher phase studies, especially phase 3 and phase 4).

• Visualize the top 10 conditions that are being successfully studied in Florida.

The Final Dashboard

Goals

1. Allow all figures to fill the entire card space (code not shown because that is the default behavior).

2. Enable scrolling.

3. Add a small amount of padding to each chart.

4. Convert our ggplot2 figures to Plotly (using the ggplotly()function for some figures, but this did not always work as shown in the code).

5. Add a top row with three value boxes to describe the study statuses.

6. Add some context using markdown.

7. Apply the united theme.

8. Add custom navigation buttons:

The Final Dashboard

Output (HTML)

https://jjc54.github.io/QuartoDashboarding/

Although this dashboard can be interacted with (i.e., clicking and hovering reveals additional information), it cannot yet be filtered or drilled down, which is a hallmark of modern dashboards.

Advanced Dashboards

Layout Inputs, Drill Down, True Interactivity

There are three ways to add layout inputs (i.e., drill downs or filters) in Quarto, each with their own distinguishing area and background color:

1. Sidebars – collapsible vertical panels.

2. Toolbars – collapsible horizontal panels.

3. Card Inputs – panel for card-specific inputs; these appear in the title area of a card for more condensed organization.

You define all three layout inputs using level two headers, much like rows.

These features can be local to a page, or global across pages (requires a level one heading).

Furthermore, they can be placed on any side of the page and can even be embedded into rows themselves for better clarity on what the input is affecting.

This interactivity is provided by htmlwidgets (R), Jupyter Widgets (Python), or Observable JS (a dialect of JavaScript).

Advanced Dashboards

Shiny

More flexible interactive components and drill down can be added using the following resources:

• Shiny for R – for dashboards that use knitr for computations (requires deployment to a server).

• Shiny for Python – for dashboards that use Jupyter for computations (requires deployment to a server).

Shiny is beyond the scope of this paper, but resources are attached to learn basic Shiny syntax and deploy a Quarto dashboard using Shiny.

Diamonds Explorer (shinyapps.io)

Advanced Dashboards

Deployment and Updates

Static dashboards have no server-dependency, and thus can be published to any web server, including:

• GitHub Pages (our method of choice).

• Quarto Pub.

• Posit Connect.

• Posit Cloud.

• Confluence.

Advanced Dashboards

Deployment and Updates

1. GitHub Desktop | Simple collaboration from your desktop

2. Ensure .qmd is named index.qmd.

3. Change the output directory to docs in the quart.yml file.

4. Add existing repository to GitHub Desktop.

5. Commit/push changes to your GitHub account.

6. Find your repository on the GitHub website, navigate to the Settings tab, navigate to Pages. Set Source to “Deploy from a branch” and set branch to “/docs” then save.

7. After a few moments, the website will render and the link will be listed.

8. Any future changes can be commited/pushed in the same way, just make sure the HTML is rendered from RStudio® each time you commit. GitHub Actions can automate this.

project:
  title: " Dashboarding with Quarto 1.4"
  output-dir: docs
editor: visual

Tips & Tricks

A Few Things to Remember

• Not renaming the quarto markdown file (.qmd) to “index.qmd” can lead to severe issues when rendering and deploying the dashboard. Double check this file name if any issues are encountered. The actual name of the dashboard (that appears on the dashboard itself) can be whatever you want and is defined inside the quarto markdown file.

• The GitHub Pages section of the Quarto documentation does not utilize the GitHub Desktop Application (Quarto – GitHub Pages). In fact, most resources refer to terminal commands, but we do not recommend them due to added complexity. Try out the desktop application!

• When in doubt, check the Dashboard Examples (see Recommended Reading). Our full code and example are also linked below.

• It can help to have some familiarity with Quarto’s other formats before attempting dashboarding. The syntax and structure follow very similar patterns as other formats, such as Quarto websites and reports. 

Conclusion

We Hope You Try Quarto 1.4 Dashboards!

• The paper demonstrated how Quarto’s cross-language support, combined with its new and improved dashboarding functionality, provides a comprehensive environment for data reporting.

• This integration is crucial for many industries where making informed decisions often depends on understanding complex datasets that update over time.

• By leveraging Quarto’s new dashboarding tools, analysts from a variety of programming backgrounds can more effectively present their data, leading to improved decision-making processes and clearer communication of findings.

• Quarto 1.4 has an extraordinary opportunity to enhance open-source data visualization and reporting practices within a multitude of industries leaning toward open-source software.

Acknowledgements & Contact Information

The authors thanks PharmaSUG for their support through the PharmaSUG New Professionals Scholarship Program. Joshua J. Cook thanks his mentors, Kirk Paul Lafler (@sasNerd), and Dr. Achraf Cohen, for their ongoing mentorship and support.